<template>
  <div class="daye">
    <div class="zhongyang">
      <div class="a" >
        <img src="../../../static/img/biji_left.png" class="im"/>
        <div class="aa">
          <div class="wenzi" align="center"  >
            添加笔记
          </div>
          <div class="wenzi" align="center">
            笔记大全
          </div>
        </div>
      </div>
      <div class="b">
        <img src="../../../static/img/biji_right.png" class="im2"/>
        <div class="jiji">
          记一记
        </div>
        <div class="kuang">
          <ul v-if="list.length!==0">
            <li v-for="(item,index) in list" :key="index" :index="index" @click="DialogVisible(item)">
              <i class="iconfont iconcaogao" style="font-size: 37px"></i>
              {{item.content}}
            </li>
          </ul>
          <div style="text-align: center" v-else>暂无笔记</div>
        </div>

        <el-dialog
          title="提示"
          :visible.sync="centerDialogVisible"
          width="30%"
          center>
          <span>
            <publich :contents="content" :items="items" :open="open" :xiugai="xiugai"/>
          </span>
        </el-dialog>

      </div>
    </div>
  </div>
</template>

<script>
  import Publich from '../../../components/Publich'
  export default {
    name: "Biji",
    components: {
      Publich
    },
    data () {
      return{
        centerDialogVisible: false,
        list: [],
        content: '',
        items: {}
      }
    },
    mounted () {
      this.init()
    },
    methods: {
      init() {
        this.$http({
          method: 'post',
          url: '/manuscript/unsent/'+this.$store.state.user.uid
        }).then(res => {
          console.log(res.data);
          this.list = res.data
        }).catch(err => {
          console.log(err);
        })
      },
      //删除
      open(val) {
        console.log(val);
        this.$confirm('此操作将永久删除该笔记, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http({
            method: 'post',
            url: '/manuscript/deleteUnsent/'+val
          }).then(res => {
            this.init()
            this.centerDialogVisible = false
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          }).catch(err => {
            console.log(err);
          })
        }).catch(() => {
          //点击取消
        });
      },
      DialogVisible(item){
        this.centerDialogVisible = true
        this.content = item.content

        if (item.anonymous) {
          item.anonymous = true
        }else {
          item.anonymous = false
        }
        if (item.isPublic) {
          item.isPublic = true
        }else {
          item.isPublic = false
        }
        this.items = item
        console.log(item);
      },
      //修改
      xiugai(val) {
        console.log(val);
        this.$http({
          url: '/manuscript/updateManuscript',
          method: 'post',
          data: val
        }).then(res => {
          this.init()
          this.centerDialogVisible = false
          this.$message({
            type: 'success',
            message: '修改完成!'
          });
        }).catch(err => {
          console.log(err);
        })
      }
    }

  }
</script>

<style scoped>
  .daye{
    background: #f1fcff;
    width: 75%;
    margin: 35px auto;
    padding: 10px 10px;
  }
  .zhongyang{
    margin: 0 auto;
    overflow: auto;
  }
  .a{
    width: 30%;
    float: left;
  }
  .b{
    float: right;
    width: 70%;
  }
  .im{
    padding-left: 85px;
    width: 153px;
    height: 160px;
  }
  .im2{
    padding-left: 350px;
    padding-top: 20px;
    padding-bottom: 20px;
    width: 173px;
    height: 78px;
  }
  .wenzi{
    color: #2c3f53;
    font-size: 30px;
    font-family: "宋体";
    padding-top: 10px;
    border: 1px solid #b0e0e6;
  }
  .kuang{
    color: #2c3f53;
    font-size: 25px;
    font-family: "宋体";
    border: 1px solid #b0e0e6;
    width: 97%;
    padding: 5px 5px;
  }
  .aa{
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 20px;
  }
  .jiji{
    position: absolute;
    font-size: 28px;
    top: 209px;
    right: 515px;
  }
  ul{
    list-style-type: none;
    padding: 0px;
    margin: 0px;
  }
  ul li{
    padding: 2px 0px;
  }
  /deep/ .el-dialog__body{
    padding: 0;
  }
  /deep/ .el-form{
    margin: 0!important;
  }
  .publich{
    margin: 0!important;
    width: 100%!important;
    background-color: #ffffff;
    -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0)!important;
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0)!important;
  }
</style>
